<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
    <style>
        li {
            list-style: none;
        }

       /* #user {
            border: 2px rgb(4, 0, 255) solid;
        }*/

        .center {
            margin: 0 auto;
            width: 400px;
            text-align: center;
        }

        .red {
            color: red;
        }

        .green {
            color: green;
        }

    </style>
</head>
<!-- 209000851 朱海 -->
<body>

    <div id="app"></div>
    <template id="root">
        <div class="center">
            <sister-component></sister-component>
            <brthor-component></brthor-component>
        </div>
    </template>
    <!-- 非父子组件 -->
    <template id="sister">
        <h3>用户注册</h3>
        <div id="user">
            <ul>
                <li>
                    <label>用户名:</label><input type="text" @blur="checkUserName" v-model="username" placeholder="请输入用户名">
                    <span :class="[this.errors.username=='校验通过'?'green':'red']">{{errors.username}}</span>
                </li>
                <li>
                    <label>密码:</label><input type="password" @blur="checkPass" v-model=" password" placeholder="请输入密码">
                    <span :class="[this.errors.password=='校验通过'?'green':'red']">{{errors.password}}</span>
                </li>
                <li>
                    <label>性别:</label>
                    <input type="radio" name="gender" value="male" v-model="gender" />男
                    <input type="radio" name="gender" value="female" v-model="gender" />女
                </li>
                <li>
                    <label>地址:</label>
                    <select v-model="selectedCity">
                        <option :value="c.name" v-for="c in cities">{{c.text}}</option>
                    </select>
                </li>
            </ul>
            <button @click="handleRegister">注册</button>
        </div>

    </template>
    <!-- 兄弟组件 -->
    <template id="brthor">
        <div style="display: flex;flex-direction: row;justify-content: center;" class="brthor">
            <table border="1">
                <tr>
                    <td>序号</td>
                    <td>用户名</td>
                    <td>性别</td>
                    <td>地址</td>
                </tr>
                <tr v-for="(u,index) in users">
                    <td>{{index+1}}</td>
                    <td>{{u.username}}</td>
                    <td>{{u.gender=='male'?'男':'女'}}</td>
                    <td>{{handleCity(u.city )}}</td>
                </tr>
            </table>
        </div>
    </template>
</body>
<script>
    // 创建接受变量
    const emitter = window.mitt()
    const app = Vue.createApp({
        template: "#root",
    })
    // 全局注册 case 帕斯卡写法非父子组件
    app.component('sister-component', {
        template: "#sister",
        data() {
            return {
                username: '',
                password: '',
                gender: 'male',
                cities: [
                    { name: 'cq', text: '重庆' },
                    { name: 'sh', text: '上海' },
                    { name: 'bj', text: '北京' },
                    { name: 'tj', text: '天津' },
                ],
                selectedCity: 'cq',
                users: [],
                errors: {},
                id: ''
            }
        },
        methods: {
            checkUserName() {
                if (this.username == "" || this.username == null) {
                    this.errors.username = "用户名不能为空"
                } else {
                    this.errors.username = "校验通过"
                }
            },
            checkPass() {
                if (this.password == "" || this.password == null) {
                    this.errors.password = "密码不能为空"
                } else {
                    if (this.password.length < 6) {
                        this.errors.password = "密码长度不正确"

                    } else {
                        this.errors.password = "校验通过"

                    }
                }
            },
            handleRegister() {
                if (this.errors.username == '校验通过' && this.errors.password == '校验通过') {
                    this.users.push({
                        username: this.username,
                        password: this.password,
                        gender: this.gender,
                        city: this.selectedCity
                    })
                }
                emitter.emit('busEmit', { users: this.users, cities: this.cities })
            },
        }
    })
    // 全局注册 兄弟组件
    app.component('brthor-component', {
        template: "#brthor",
        data() {
            return {
                name: 'brthor',
                users: [],
                cities: []
            }
        },
        mounted() {
            emitter.on('busEmit', (v) => {
                this.users = v.users
                this.cities = v.cities
            })
        },
        methods: {
            handleCity(name) {
                console.log(name)
                let text = ''
                this.cities.forEach(c => {
                    if (c.name == name) {
                        text = c.text
                    }
                });
                return text
            }
        }
    })
    //   挂载到应用实例
    app.mount("#app")
</script>

</html>